

import React, {useEffect, useMemo} from 'react';
import {DndProvider} from 'react-dnd';
import {HTML5Backend} from 'react-dnd-html5-backend';
import {Table} from 'acud';
import useDragList from '@/hook/useDragList';
import DraggableBodyRow from './DraggableBodyRow';

import {dataSource, getColumns} from './options';

const Drag: React.FC = () => {
    const {loading, data, setData, moveRow} = useDragList();

    useEffect(
        () => {
            setData(dataSource);
        },
        [setData],
    );

    const columns = useMemo(() => getColumns(), []);

    return (
        <>
            <DndProvider backend={HTML5Backend}>
                <Table
                    columns={columns as any}
                    dataSource={loading ? [] : data}
                    components={{
                        body: {
                            row: DraggableBodyRow,
                        },
                    }}
                    onRow={(record, index) => {
                        const attr = {
                            record,
                            index,
                            moveRow,
                        };
                        return attr as React.HTMLAttributes<any>;
                    }}
                />
            </DndProvider>
        </>
    );
};

export default Drag;
